<template>
  <div class="create-commere-order-form">
    <Title title="物流信息" class="mb-16" />
    <el-form
      ref="formRef"
      :model="logisticsInfo"
      :label-position="showMobilePage?'left':'right'"
      class="edit-order lineHeight32"
      label-width="90px">
      <div class="customer-form">
        <el-row type="flex" class="response-el-row">
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="发货单号" prop="invoiceNum">
              <el-input
                v-model="logisticsInfo.invoiceNum"
                :disabled="disabled"
                name="invoiceNum"
                maxlength="50"
                type="text"
                size="small"
                clearable
                placeholder="请输入发货单号" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="物流成本(元)" prop="cost">
              <el-input
                v-model="logisticsInfo.cost"
                :disabled="disabled"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                name="cost"
                type="number"
                placeholder="请输入物流成本"
                size="small"
                clearable
                @change="numInputChange($event, 'cost')"
                @mousewheel.native.prevent />
            </el-form-item>
          </el-col>
          <el-col v-if="!showOtherFees" :span="12" class="responsive-col-lg-8">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="logisticsInfo.phone"
                :disabled="disabled"
                name="phone"
                maxlength="50"
                type="text"
                size="small"
                clearable
                placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col v-if="showOtherFees" :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="仓库收件费(元)" prop="warehouseFees">
              <el-input
                v-model="logisticsInfo.warehouseFees"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                name="cost"
                type="number"
                placeholder="请输入仓库收件费"
                size="small"
                clearable
                @change="numInputChange($event, 'warehouseFees')"
                @mousewheel.native.prevent />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="发货时间" prop="invoiceTime">
              <el-date-picker
                v-model="logisticsInfo.invoiceTime"
                :disabled="disabled"
                clearable
                type="datetime"
                placeholder="请选择发货时间"
                value-format="timestamp"
                size="small"
                class="order-time" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="收货地址" prop="address">
              <el-input
                v-model="logisticsInfo.address"
                :disabled="disabled"
                name="address"
                maxlength="50"
                type="text"
                size="small"
                clearable
                placeholder="请输入收货地址" />
            </el-form-item>
          </el-col>
          <el-col v-if="showOtherFees" :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="其他费用(元)" prop="otherFees">
              <el-input
                v-model="logisticsInfo.otherFees"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                name="invoiceNum"
                type="number"
                size="small"
                clearable
                placeholder="请输入其他费用"
                @change="numInputChange($event, 'otherFees')"
                @mousewheel.native.prevent />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';

export default {
  components: { Title },
  model: {
    prop: 'logisticsInfo',
    event: 'change'
  },
  props: {
    logisticsInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    showOtherFees: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    // 限制金额
    numInputChange(text, prop) {
      let str = text.replace(/[^\d.]/g, ''); // 只允许数字
      str = str.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      str = str.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
      str = str.replace(/^(\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后3位
      this.logisticsInfo[prop] = str;
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-form{
  .width240{
    width: 240px;
  }
}
.create-commere-order-form {
  margin: 32px 0;
  &::v-deep {
    .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-input {
        width: 240px;
      }
    }
    .el-range-editor {
      width: 240px;
      .el-range-input {
        width: 90px;
      }
      .el-range-separator {
        width:20px;
      }
    }
    .goods-coding {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-icon-warning {
        margin-left: 5px;
        color: #999;
      }
    }
  }
  .left {
    margin-right: 108px;
  }
}
.indentation-form-item {
  ::v-deep .el-form-item {
    label {
      line-height: 1.2 !important;
    }
  }
}
</style>
